import React from 'react'
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test from './pages/Test'
// 需求: Home和Login是两个一级路由组件, Test是Home里面的二级路由组件.Test渲染在Home组件中hr下面
export default function App() {
  return (
    <div>
      {/* NavLink和Link组件的作用一致,但是会自动根据当前路径给a标签添加active类名.从而快速实现高亮 */}

      {/* <NavLink to="/home" replace>
        home
      </NavLink>
      <NavLink to="/login" state={['a', 'b', 'c']}>
        login
      </NavLink> */}

      {/* 如果active类名冲突了,也可以自定义类型 */}
      {/* <NavLink
        to="/home"
        className={({ isActive }) => {
          // 当浏览器地址栏的路径发生变化,则这个函数会被调用
          // isActive的值是一个布尔值,
          //   如果当前浏览器地址栏的路径和当前NavLink的to属性的值相同,
          //   则isActive为true,
          //   否则为false
          // console.log('home', isActive)
          return isActive ? 'done' : ''
        }}
      >
        home
      </NavLink>
      <NavLink
        to="/login"
        className={({ isActive }) => {
          // 当浏览器地址栏的路径发生变化,则这个函数会被调用
          // console.log('login', isActive)
          return isActive ? 'done' : ''
        }}
      >
        login
      </NavLink> */}
      <NavLink
        to="/home"
        style={({ isActive }) => {
          // 注意: 自定义style其实和自定义类名一样.但是返回值不一样.行内样式返回值要求是对象
          return isActive ? { color: 'skyblue', fontSize: 30 } : {}
        }}
        // end的作用: 当home的子级路由展示了,则home不高亮. 不写end.默认值情况下子级路由展示,home高亮
        end
      >
        home
      </NavLink>
      <NavLink
        to="/login"
        style={({ isActive }) => {
          return isActive ? { color: 'skyblue', fontSize: 30 } : {}
        }}
      >
        login
      </NavLink>
      <hr />
      <Routes>
        <Route path="home" element={<Home></Home>}>
          <Route path="test" element={<Test></Test>}></Route>
        </Route>
        <Route path="login">
          <Route path=":id" element={<Login></Login>}></Route>
          <Route path="" element={<Login></Login>}></Route>
        </Route>
      </Routes>
    </div>
  )
}
